import '../../style/addressBook.less';
import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import {FloatingTouch} from 'weaver-mobile-page';
import { withRouter } from 'react-router-dom';
import SearchCondition from './search/SearchCondition';
import Content from './Content';
import { Tools, SearchBar } from 'weaver-mobile';

const getLabel = Tools.getLabel;

@inject('groupStore')
@inject('addressBookStore')
@withRouter
@observer
export default class AddressBook extends Component {
    constructor(props){
        super(props);
    }

    componentWillMount() {
        const {
            groupStore,
            addressBookStore,
            location,
        } = this.props, {
            splitUrl
        } = groupStore, {
            search
        } = location, {
            setPageType
        } = addressBookStore;

        if (search) {
          const { type } = splitUrl(search);
          setPageType(type);
        }
        
    }

    componentDidMount(){
        const {addressBookStore: store} = this.props;
        const { pageType } = store;

        if (pageType === "group") {
             document.title = getLabel(81554, '常用组');
        }else{
            document.title = getLabel('1515','通讯录');
        }
        this.init()
    }

    init = () => {
        const {addressBookStore: store} = this.props;
        const { pageType } = store;
        if (pageType === "group") {
            store.setActiveTab(4);
        }else{
            store.init();
        }
    }
    
    render() {
        const {addressBookStore: store} = this.props;
        const { pageType, searchvalue, handleSearchChange, handleSearchSubmit } = store;
        return (
            <FloatingTouch onClick={() => window.location.href = '#/addressBook'}>
                <div className='addressBook'>
                    { (pageType === "group") ?  
                        <SearchBar 
                            placeholder={getLabel(500351, "请输入关键字")}
                            value={searchvalue} 
                            onChange={handleSearchChange}
                            onSubmit={handleSearchSubmit}
                        /> : 
                        <SearchCondition store={store} /> }
                    <Content store={store}/>
                </div>
            </FloatingTouch>
        )
    }
}